import {Link} from 'react-router';
import './index.less';
import {Config} from "../../libs/";
import {PAGE_SUBJECT} from "../../stores/subject";
const Item = React.createClass({

    render(){

        return (
            <Link to={this.props.url} onClick={()=> {
                this.props.onClick()
            }} className={(this.props.current == (this.props.index - 1) ? 'active' : '')
            + ' item'}
                  style={{width: (window.innerWidth - 100) / 9}}>
                <div className="imgs" style={{background: this.props.color}}>
                    <img
                        src={require('../../imgs/nav/home_icon' +
                            this.props.index + '.png')} alt=""/>
                </div>
                <p>{this.props.label}</p>
            </Link>
        )
    }
});

const NavBottom = React.createClass({
    getInitialState(){
        return {
            current: 0,
        }
    },
    componentDidMount(){

    },
    render(){
        const menus = Config.Bottom, self = this;
        return (
            <div className="nav-bottom">
                {menus.map((item, index)=> {
                    return <Item key={index} current={this.state.current} onClick={()=> {
                        self.props.onClick(index - 1);
                        self.setState({
                            current: index
                        })
                    }} index={index + 1} {...item}></Item>
                })}
            </div>
        )
    }
});
export default NavBottom